<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/side-top.css">
    <style>
        #diji #aside ul li:nth-child(1){
        background-color: rgb(255, 212, 81);
        border-radius: 0 20px 20px 0;
        color: black;
        }
        #diji #main .insert{
            float: left;
            height: 30px;
            width: 18%;
            border: 1px solid rgb(223, 223, 223);
            margin-top: 20px;
            margin-left: 3%;
            border-radius: 3px;
        }
        #diji #main .insert::placeholder{
            text-align: center;
            color: rgb(186, 181, 181);
        }
        #diji #main #search{
            width: 3.7%;
            margin-top: 15px;
            cursor: pointer;
        }
        #diji #main #add{
            margin-top: 20px;
            margin-right: 3%;
            float: right;
            width: 8%;
            height: 45px;
            background-color: rgb(255, 212, 81);
            border-radius: 5px;
            border: 0;
            cursor: pointer;
        }
        #diji #main #add:hover{
            color: rgb(140, 138, 135);
        }
        #diji #main #table{
            margin-left: 10%;
            width: 80%;
            height: 400px;
            float: left;
            /* background-color: rgb(99, 210, 55); */
            text-align: center;
        }
        #diji #main table{
            width: 100%;
            height: 100%;
        }
        #diji #main #table td,th{
            /* border-radius: 8px; */
            height: 50px;

        } 
        #diji #main #table tr:nth-child(1){
            background-color: white;
        }
        #diji #main #table tr:nth-child(odd){
            background-color: rgb(247, 247, 247);
            border-radius: 8px;
            
        }
        #diji #main #table tr:nth-child(even){
            background-color: white;
        }
        #diji #main #table #th{
            border: 2px solid rgb(223, 223, 223);
        }
        #diji #main #table .delete{
            color: rgb(240, 99, 67);
            text-decoration: none;
        }
        #diji #main #table .update{
            color: rgb(236, 153, 75);
            text-decoration: none;
        }
        #diji #main #table .check{
            color: rgb(135, 212, 235);
            text-decoration: none;
        }
        #diji #main #page{
            margin-left: 25%;
            margin-top: 5%;
        }
        #diji #main #page li{
            float: left;
            list-style: none;
            margin-left: 1%;
        }
        #diji #main #page li a{
            border: 1px solid rgb(203, 202, 202);
            border-radius: 8px;
            padding: 8px 16px;
            color: black;
            text-decoration: none;
        }
        #diji #main #page a:hover{
            background-color: rgb(223, 223, 223);
        }
        #diji #main #page .active{
            padding: 0;
            background-color: rgb(223, 223, 223);
            border: 1px solid rgb(223, 223, 223);
            padding: 8px 16px;
            color: black;
            text-decoration: none;
        }
        #diji #main #page .disabled{
            color: rgb(223, 223, 223);
        }
        #diji #main #page .disabled:hover{
            background-color: white;
        }
        #diji #main #page p{
            float: left;
            margin-left: 1%;
        }
        #diji #shurukuang{
            border-radius: 8px;
            box-shadow: 0 0 30px rgb(203, 203, 203);
            position: absolute;
            width: 35%;
            height: 50%;
            left: 32.5%;
            top: 27.5%;
            background-color: rgb(240, 239, 239);
            display: none;
            transition: width 2s, height 2s;
        }
        #diji #shurukuang .shuru{
            width: 70%;
            height: 30px;
            margin: 0;
            background-color: white;
            border-radius: 5px;
            cursor: text;
        }
        #diji #shurukuang .title{
            text-align: center;
            font-size: 30px;
        }
        #diji #shurukuang form div{
            margin-top: 10px;
            margin-left: 12%;
        }
        #diji #shurukuang form input{
            width: 70px;
            height: 50px;
            margin-left: 25%;
            margin-top: 10px;
            background-color: rgb(255, 212, 81);
            border-radius: 8px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="diji" class="clear">
        <div id="shurukuang"></div>
        <div id="aside"> <!-- 侧边栏 -->
            <img src="image/logo.png" id="logo">
            <ul>
                <li>学生管理</li>
                <li onclick="toClassManage()">班级管理</li>
                <li onclick="toGradeManage()">成绩管理</li>
                <li onclick="toMajorManage()">专业管理</li>
                <li onclick="toSubManage()">学科管理</li>
            </ul>
        </div>
        <div id="top" class="clear">
            <p>学生管理</p>
            <img src="image/out.png" id="out">
        </div>
        <div id="main">
            <!-- 查找输入框 -->
            <!-- <input type="text" class="insert" placeholder="请输入学生姓名">
            <input type="text" class="insert" placeholder="请输入学生班级"> -->
            <input type="text" class="insert" placeholder="请输入要查找的学生学号">
            <img src="image/search.png" id="search" onclick="search()">
            <input type="button" id="add" value="+添加学生" onclick="add()">
            <br><br><br><br>
            <div id="table"> <form>
                <table>
                    <thead>
                        <tr>
                            <th>学号</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>性别</th>
                            <th>专业</th>
                            <th>年级</th>
                            <th>班级</th>
                            <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="tbody"><!-- 数据渲染位置 -->

                    </tbody>
                    
                        </table>
            </form>
            <div id="page">
                <li><a href="#" onclick = 'downPage()' id="downChange">«</a></li>
                <ul id="yema"><!-- 页码渲染位置 -->
                </ul>
                <li><a href="#" onclick = 'upPage()' id="upChange">»</a></li>
            </div>
        </div>
           
        </div>
    </div>
</body>
<script>
    //学生数据
    var studentList = [
      {id:1,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:2,name:'李四',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:3,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:4,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:5,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:6,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:7,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:8,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:9,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:10,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:11,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:12,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:13,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:14,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:15,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:16,name:'赵刘',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:17,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:18,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:19,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:20,name:'李qi7',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:21,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:22,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:23,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:24,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:25,name:'孙事宜',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:26,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:27,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:28,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:29,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:30,name:'张三丰',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:31,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:32,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:33,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:34,name:'李四',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:35,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:36,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:37,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:38,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:39,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:40,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:41,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:42,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:43,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:44,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:45,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:46,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:47,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:48,name:'赵刘',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:49,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:50,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:51,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:52,name:'李qi7',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:53,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:54,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:55,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:56,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:57,name:'孙事宜',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:58,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:59,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:60,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:61,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:62,name:'张三丰',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:63,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:64,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:65,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:66,name:'李四',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:67,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:68,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:69,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:70,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:71,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:72,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:73,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:74,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:75,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:76,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:77,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:78,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:79,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:80,name:'赵刘',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:81,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:82,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:83,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:84,name:'李qi7',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:85,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:86,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:87,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:88,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:89,name:'孙事宜',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:90,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:91,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:92,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:93,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:94,name:'张三丰',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:95,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:96,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:97,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:98,name:'李四',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:99,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:100,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:101,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:102,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:103,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:104,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:105,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:106,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:107,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:108,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:109,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:110,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:111,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:112,name:'赵刘',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:113,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:114,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:115,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:116,name:'李qi7',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:117,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:118,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:119,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:120,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:121,name:'孙事宜',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:122,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:123,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:124,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:125,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:126,name:'张三丰',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:127,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:128,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'}
    ]
    //每页允许展示数据量
    var maxPage = 7;
    //获取各元素
    var yema = document.getElementById('yema');
    var tbody = document.getElementById('tbody'); 
    var shurukuang = document.getElementById('shurukuang');
    //初始化当前页为1
    var dangqianye = 1;
    //页码渲染
    function showpage(data,dom,dangqinaye) {
        if(Math.ceil(data.length/maxPage) <= 7){
            dom.innerHTML = '';
            for(var i = 1;i <= Math.ceil(data.length/maxPage);i++) {
            dom.innerHTML += `<li><a href="#" onclick = 'showData(${i})' class = 'button'>${i}</a></li>`;
        }}
        else {
            if(dangqianye <= 5) {
                dom.innerHTML = '';
                for(var i = 1;i <= 7;i++) {
                dom.innerHTML += `<li><a href="#" onclick = 'showData(${i})' class = 'button'>${i}</a></li>`
        }
        dom.innerHTML += `<p>...</p>
        <li><a href="#" onclick = 'showData(${Math.ceil(data.length/maxPage)})' class = 'button'>${Math.ceil(data.length/maxPage)}</a></li>`;
    }
            else if(dangqianye > 5 && dangqianye <= Math.ceil(data.length/maxPage) - 5) {
                dom.innerHTML = '';
                dom.innerHTML += `<li><a href="#" onclick = 'showData(${1})' class = 'button'>${1}</a></li>`;
                dom.innerHTML += `<p>...</p>`;
                for(var i = dangqianye - 2;i <= dangqianye + 2;i++) {
            dom.innerHTML += `<li><a href="#" onclick = 'showData(${i})' class = 'button'>${i}</a></li>`
                
        }
        dom.innerHTML += `<p>...</p>
        <li><a href="#" onclick = 'showData(${Math.ceil(data.length/maxPage)})' class = 'button'>${Math.ceil(data.length/maxPage)}</a></li>`;
        
            }
            else if(dangqianye > Math.ceil(data.length/maxPage) - 5){
                dom.innerHTML = '';
                dom.innerHTML += `<li><a href="#" onclick = 'showData(${1})' class = 'button'>${1}</a></li>`
                dom.innerHTML += `<p>...</p>`
                for(i = Math.ceil(data.length/maxPage) - 5;i <= Math.ceil(data.length/maxPage) ;i++){
                    dom.innerHTML += `<li><a href="#" onclick = 'showData(${i})' class = 'button'>${i}</a></li>`
                }
            }
            }    
        }    
    //数据渲染
    function showTable(data,dom) {
        dom.innerHTML = '';
        if(data.length > 0){
            for(var i = 0;i < data.length;i++) {
            dom.innerHTML += `<tr>
                        <td>${data[i].id}</td>
                        <td>${data[i].name}</td>
                        <td>${data[i].age}</td>
                        <td>${data[i].sex}</td>
                        <td>${data[i].major}</td>
                        <td>${data[i].grade}</td>
                        <td>${data[i].className}</td>
                        <td><a href="#" class="delete" onclick = "del(${data[i].id})"> 删除 </a><a href="#" class="update" onclick = 'upDate(${JSON.stringify(data[i])})'> 修改 </a><a href="#" class="check" onclick='check(${JSON.stringify(data[i])})'> 查看 </a></td>
                    </tr>`
        }
        return
        }
        if(studentList.length == 0){
                    tbody.innerHTML = `<tr align="center"><td colspan="8">空空如也</td></tr>`;
                }
    }
    //分页
    function showData(num){
        showpage(studentList,yema,num);
        var start = (num - 1) * maxPage;
        var list = studentList.slice(start,start + maxPage);
        showTable(list,tbody);
        var listY = yema.getElementsByTagName('a');
        document.getElementById('upChange').classList.remove('disabled');
        document.getElementById('downChange').classList.remove('disabled');
        for(var i = 0;i < listY.length;i++){
            listY[i].classList.remove('active');
        }
        if(num == Math.ceil(studentList.length / maxPage)){
            document.getElementById('upChange').classList.add('disabled');
        }
        if(num == 1){
            document.getElementById('downChange').classList.add('disabled');
        }
        dangqianye = num;
        showpage(studentList,yema,num);
            if(num >= 6 && num <= Math.ceil(studentList.length / maxPage) - 5){
            listY[3].classList.add('active');
        }
        else if(num < 6){
            listY[num-1].classList.add('active');
        }else{
            listY[num - Math.ceil(studentList.length / maxPage) + 6].classList.add('active');
        }
    }
    //上一页
    function upPage(){
        if(dangqianye < Math.ceil(studentList.length / maxPage)){
            dangqianye++;
            showpage(studentList,yema,dangqianye);
            showData(dangqianye);
        }
    }
    //下一页
    function downPage(){  
        if(dangqianye > 1){
            dangqianye--;
            showpage(studentList,yema,dangqianye);
            showData(dangqianye);
        }
    }
    //初始化渲染
    showpage(studentList,yema,dangqianye);
    showData(dangqianye);
    //删除功能
    function del(id){
        for(var i = 0;i < studentList.length;i++){
            if(studentList[i].id == id){
                studentList.splice(i,1);
                break;
            }
            }
            showpage(studentList,yema,dangqianye);
            showData(dangqianye);
        }
    //修改功能
    function upDate(stu){
        shurukuang.style.display = 'block';
        shurukuang.innerHTML +=`
        <div class = "title">学生修改</div>
        <form>
            <div>
                <label >
                学生学号 <input disabled type="text" class="shuru"  id="stuId" value="${stu.id}">
            </label>
            </div>
        <div>
            <label >
                学生姓名 <input type="text" class="shuru" placeholder="请输入学生姓名" id="name" value="${stu.name}">
            </label>
        </div>
        <div>
            <label >
                学生性别 <input type="text" class="shuru" placeholder="请输入学生性别" id="sex" value="${stu.sex}">
            </label>
        </div>
        <div>
            <label >
                学生年龄 <input type="text" class="shuru" placeholder="请输入学生年龄" id="age" value="${stu.age}">
            </label>
        </div>
        <div>
            <label >
                学生专业 <input type="text" class="shuru" placeholder="请输入学生专业" id="major" value="${stu.major}">
            </label>
        </div>
        <div>
            <label >
                学生年级 <input type="text" class="shuru" placeholder="请输入学生年级" id="grade" value="${stu.grade}">
            </label>
        </div>
        <div>
            <label >
                学生班级 <input type="text" class="shuru" placeholder="请输入学生班级"  id="className" value="${stu.className}">
            </label>
        </div>
        <input type="button" value="修改" onclick = 'querenxiugai()' >
        <input type="button" value="取消" onclick = 'out()'>
    </form>`
    }
    //点击取消按钮，关闭修改框
    function out() {
        shurukuang.style.display = 'none';
        shurukuang.innerHTML = '';
    }
    //点击确认修改按钮，修改学生信息
    function querenxiugai() {
        var id = document.getElementById('stuId').value;
        var sex = document.getElementById('sex').value;
        var name = document.getElementById('name').value;
        var age = document.getElementById('age').value;
        var major = document.getElementById('major').value;
        var grade = document.getElementById('grade').value;
        var className = document.getElementById('className').value;
        var stu = {
            id: id,
            sex:sex,
            name: name,
            age: age,
            major: major,
            grade: grade,
            className: className
        };
        for(var i = 0;i < studentList.length;i++){
            if(studentList[i].id == stu.id){
                studentList[i] = stu;
                break;
        }
       }
       showpage(studentList,yema,dangqianye);
        showData(dangqianye);
       shurukuang.style.display = 'none';
        shurukuang.innerHTML = '';
    }
    //查看功能，点击查看，弹出学生信息
    function check(stu){
        shurukuang.style.display = 'block';
        shurukuang.innerHTML +=`
        <div class = "title">学生查看</div>
        <form>
            <div>
                <label >
                学生学号 <input style="cursor: default;" disabled type="text" class="shuru"  id="stuId" value="${stu.id}">
            </label>
            </div>
        <div>
            <label >
                学生姓名 <input style="cursor: default;" disabled type="text" class="shuru" placeholder="请输入学生姓名" id="name" value="${stu.name}">
            </label>
        </div>
        <div>
            <label >
                学生性别 <input style="cursor: default;" disabled type="text" class="shuru" placeholder="请输入学生性别" id="sex" value="${stu.sex}">
            </label>
        </div>
        <div>
            <label >
                学生年龄 <input style="cursor: default;" disabled type="text" class="shuru" placeholder="请输入学生年龄" id="age" value="${stu.age}">
            </label>
        </div>
        <div>
            <label >
                学生专业 <input style="cursor: default;" disabled type="text" class="shuru" placeholder="请输入学生专业" id="major" value="${stu.major}">
            </label>
        </div>
        <div>
            <label >
                学生年级 <input style="cursor: default;" disabled type="text" class="shuru" placeholder="请输入学生年级" id="grade" value="${stu.grade}">
            </label>
        </div>
        <div>
            <label >
                学生班级 <input style="cursor: default;" disabled type="text" class="shuru" placeholder="请输入学生班级"  id="className" value="${stu.className}">
            </label>
        </div>
        <input style="margin-left: 45%" type="button" value="取消" onclick = 'out()'>
    </form>`
    }
    //添加学生
    function add() {
        shurukuang.style.display = 'block';
        shurukuang.innerHTML +=`
        <div class = "title">学生修改</div>
        <form>
            </div>
        <div>
            <label >
                学生姓名 <input type="text" class="shuru" placeholder="请输入学生姓名" id="name">
            </label>
        </div>
        <div>
            <label >
                学生性别 <input type="text" class="shuru" placeholder="请输入学生性别" id="sex">
            </label>
        </div>
        <div>
            <label >
                学生年龄 <input type="text" class="shuru" placeholder="请输入学生年龄" id="age">
            </label>
        </div>
        <div>
            <label >
                学生专业 <input type="text" class="shuru" placeholder="请输入学生专业" id="major">
            </label>
        </div>
        <div>
            <label >
                学生年级 <input type="text" class="shuru" placeholder="请输入学生年级" id="grade">
            </label>
        </div>
        <div>
            <label >
                学生班级 <input type="text" class="shuru" placeholder="请输入学生班级"  id="className">
            </label>
        </div>
        <input type="button" value="添加" onclick = 'querenadd()' >
        <input type="button" value="取消" onclick = 'out()'>
    </form>`
    }
    //点击确认添加，将学生信息存入
    function querenadd(){
        var sex = document.getElementById('sex').value;
        var name = document.getElementById('name').value;
        var age = document.getElementById('age').value;
        var major = document.getElementById('major').value;
        var grade = document.getElementById('grade').value;
        var className = document.getElementById('className').value;
        var stu = {
            id:parseInt(Math.random()*1000),
            sex:sex,
            name: name,
            age: age,
            major: major,
            grade: grade,
            className: className
        };
        for (var i = 0; i < studentList.length; i++) {
            if(stu.id == studentList[i].id){
                stu.id = Math.random()*1000;
                i = -1;
            }
        }
        if(stu.name != '' && stu.age != '' && stu.major != '' && stu.grade != '' && stu.className != ''){
           studentList.push(stu);
            alert('添加成功'); 
        }
            
        else
            alert('请输入完整信息');
        showpage(studentList,yema,dangqianye);
        showData(dangqianye);
        shurukuang.style.display = 'none';
        shurukuang.innerHTML = '';
    }
    //搜索功能
    function search() {
        var stuId = document.getElementsByClassName('insert')[0].value;
        for(var i = 0;i < studentList.length;i++){
            if(stuId == studentList[i].id){
                shurukuang.style.display = 'block';
            shurukuang.innerHTML +=`
        <div class = "title">学生查看</div>
        <form>
            <div>
                <label >
                学生学号 <input style="cursor: default;" disabled type="text" class="shuru"  id="stuId" value="${studentList[i].id}">
            </label>
            </div>
        <div>
            <label >
                学生姓名 <input style="cursor: default;" disabled type="text" class="shuru" placeholder="请输入学生姓名" id="name" value="${studentList[i].name}">
            </label>
        </div>
        <div>
            <label >
                学生性别 <input style="cursor: default;" disabled type="text" class="shuru" placeholder="请输入学生性别" id="sex" value="${studentList[i].sex}">
            </label>
        </div>
        <div>
            <label >
                学生年龄 <input style="cursor: default;" disabled type="text" class="shuru" placeholder="请输入学生年龄" id="age" value="${studentList[i].age}">
            </label>
        </div>
        <div>
            <label >
                学生专业 <input style="cursor: default;" disabled type="text" class="shuru" placeholder="请输入学生专业" id="major" value="${studentList[i].major}">
            </label>
        </div>
        <div>
            <label >
                学生年级 <input style="cursor: default;" disabled type="text" class="shuru" placeholder="请输入学生年级" id="grade" value="${studentList[i].grade}">
            </label>
        </div>
        <div>
            <label >
                学生班级 <input style="cursor: default;" disabled type="text" class="shuru" placeholder="请输入学生班级"  id="className" value="${studentList[i].className}">
            </label>
        </div>
        <input style="margin-left: 45%" type="button" value="取消" onclick = 'out()'>
    </form>`
                break;
        }
    }
}
    //退出登录，跳转登录页面
    document.getElementById('out').onclick = function() {
    location.href = 'login.html';
  }
    function toClassManage(){
    location.href = 'classManage.html';
  }
    function toGradeManage(){
        location.href="gradeManage.html"
    }
    function toMajorManage(){
    location.href = 'majorManage.html';
  }
    function toSubManage(){
    location.href = 'subManage.html';
  }
</script>
</html>